/**
 * Created by Administrator on 2016/7/1.
 */
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { NavBar, Icon, Toast } from 'antd-mobile';
import {
  getLongComments,
  getStoryExtra,
  getShortComments,
  getShortCommentsMore
} from '../actions/home';
import { Comment } from '../components/Comment';
import '../assets/less/home.less';
import iconComments from '../assets/svg/comments.svg';

const mapStateToProps = state => ({
  home: state.home
});

const mapDispatchTpProps = dispatch =>
  bindActionCreators(
    {
      getLongComments,
      getStoryExtra,
      getShortComments,
      getShortCommentsMore
    },
    dispatch
  );

function showToast() {
  Toast.info('评论功能没有开放!', 1);
}

/**
 * connect中间件
 * connect一定要写在需要传递参数的组件头部，因为这是语法规则，只对当前关联的组件生效，和java的原理是一致的
 * state用法：state => state（传递全部state）
 * dispatch用法：（单个action）bindActionCreators(navActions, dispatch)，（多个action）bindActionCreators({...action1, ...action2}, dispatch)
 */
class CommentsContainer extends React.Component {
  constructor(props) {
    super(props);
    //构造函数用法
    //常用来绑定自定义函数，切记不要在这里或者组件的任何位置setState，state全部在reducer初始化，相信对开发的后期很有帮助
    //例子：this.myfunction = this.myfunction.bind(this)
    // this.handleClick = this.handleClick.bind(this)
  }

  componentDidMount() {
    const id = this.props.match.params.id;
    this.props.getStoryExtra(id);
    this.props.getLongComments(id);
    this.props.getShortComments(id);
  }

  render() {
    // const {title, body, image, image_source} = this.props.home.newsDetails
    const {
      comments,
      short_comments: shortCommentsNum
    } = this.props.home.storyExtra;
    const longComments = this.props.home.longComments;
    const shortComments = this.props.home.shortComments;
    return (
      <div className="home-wrapper">
        <NavBar
          onLeftClick={this.props.history.goBack}
          mode="dark"
          leftContent={[
            <div className="nav-left" key={2}>
              {comments}条评论
            </div>
          ]}
          rightContent={[
            <div className="nav-box" key={1}>
              <span onClick={showToast} className="icon-box">
                <Icon className="icon-svg" type={iconComments} />
              </span>
            </div>
          ]}
        />
        <Comment comments={longComments} isLongComment={true} isFold={false} />
        {shortCommentsNum ? (
          <Comment
            match={this.props.match}
            fetchData={this.getShortCommentsMore}
            comments={shortComments}
            isFold={true}
            isLongComment={false}
            shortCommentsNum={shortCommentsNum}
          />
        ) : null}
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchTpProps)(CommentsContainer);

CommentsContainer.propTypes = {
  history: PropTypes.object,
  home: PropTypes.object,
  match: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired
};
